<template>
  <div class="tabbar">
    <router-view/>
    <van-tabbar v-model="active" class="tab" inactive-color="#333333" active-color="#E0261B">
      <van-tabbar-item icon="home-o" @click="tabUrl('/index')">
        <span>首页</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? $img('home_a.png') : $img('home.png')"
        >
      </van-tabbar-item>
      <van-tabbar-item icon="search" @click="tabUrl('/society')">
        <span>社交圈</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? $img('sjq_a.png') : $img('sjq.png')"
        >
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="tabUrl('/impage')">
        <span>消息</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? $img('msg_a.png') : $img('msg.png')"
        >
      </van-tabbar-item>
      <!-- <van-tabbar-item icon="friends-o" info="5" @click="tabUrl('/cart')">
        <span>购物车</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? $img('cart_a.png') : $img('cart.png')"
        >
      </van-tabbar-item> -->
      <van-tabbar-item icon="setting-o" @click="tabUrl('/center')">
        <span>我的</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? $img('center_a.png') : $img('center.png')"
        >
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    tabUrl (url) {
      this.$router.push(url)
    }
  },
  created () {
    if (this.$route.path === '/' && this.$route.path === '/index') {
      this.active = 0
    } else if (this.$route.path === '/society') {
      this.active = 1
    } else if (this.$route.path === '/impage') {
      this.active = 2
    } else if (this.$route.path === '/center') {
      this.active = 3
    }
  }
}
</script>

<style lang="scss">
.tabbar{
  // padding-bottom: .95rem;
  height: calc(100% - .95rem);
  overflow: auto;
  .tab{
    height: .95rem;
    .van-tabbar-item{
      display: flex;
      .van-tabbar-item__text{
        font-size: .2rem;
      }
      span{
        font-size: .2rem;
      }
      img{
        width: .48rem;
        height: .48rem;
        font-size: .5rem;
      }
    }
  }
}
</style>
